<template>
  <div class="step-wrapper">
    <div
      class="step"
      :class="{ active: index <= active }"
      v-for="(item, index) of list"
      :key="index"
    >
      <div class="left">
        <div class="circle">{{ index + 1 }}</div>
        <div class="line"></div>
      </div>
      <div class="right">
        <span class="title">{{ item.title }}</span>
        <span class="description">{{ item.description }}</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import { Plus } from '@element-plus/icons-vue'
const props = defineProps({
  active: {
    type: Number,
    default: 0,
  },
  list: {
    Type: Array,
    default: [],
  },
})
</script>
<style lang="scss" scoped>
.step-wrapper {
  width: 100%;
  .step {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    .left {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-right: 18px;
      .circle {
        width: 22px;
        height: 22px;
        border: 1px solid #d9e1ef;
        background: #f2f5fa;
        border-radius: 50%;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
      }
      .line {
        width: 1px;
        height: 80px;
        background: #d5deed;
        border-radius: 0px;
      }
    }
    .right {
      width: calc(100% - 40px);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      .title {
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        margin-bottom: 6px;
      }
      .description {
        font-size: 14px;
        font-weight: 400;
        color: #b4bbca;
      }
    }
    &:last-child {
      .line {
        display: none;
      }
    }
    &.active {
      .circle {
        background: linear-gradient(0deg, #4576ee, #6297f5);
        border: 1px solid #4576ee;
        color: #ffffff;
      }
      .title {
        color: #6297f5;
      }
    }
  }
}
</style>
